Addon-docs: Fix source panel disabling #29791

shilman · 2024-12-03T14:28:31Z

What I did

Use built-in method for disabling the new source panel.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Open a sandbox and see the new Code panel
Observe the panel is not visible in the new stories

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	0 B	-1.29	0%
initSize	130 MB	130 MB	-1.05 kB	-1.59	0%
diffSize	52.5 MB	52.5 MB	-1.05 kB	-1.57	0%
buildSize	7.2 MB	7.2 MB	-222 B	0.22	0%
buildSbAddonsSize	1.87 MB	1.87 MB	-222 B	0.43	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	0 B	-0.01	0%
buildSbPreviewSize	271 kB	271 kB	0 B	0.76	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.2 MB	4.2 MB	-222 B	0.07	0%
buildPreviewSize	3 MB	3 MB	0 B	0.56	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.3s	7.2s	-86ms	-1.27	-1.2%
generateTime	21.6s	21.8s	180ms	-0.04	0.8%
initTime	15s	14.5s	-558ms	-0.36	-3.8%
buildTime	9s	8.5s	-455ms	-0.06	-5.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.7s	5s	-670ms	-1.01	-13.2%
devManagerResponsive	4.1s	3.5s	-652ms	-0.72	-18.4%
devManagerHeaderVisible	672ms	591ms	-81ms	-0.47	-13.7%
devManagerIndexVisible	743ms	675ms	-68ms	-0.38	-10.1%
devStoryVisibleUncached	2s	1.7s	-322ms	0.2	-18.5%
devStoryVisible	742ms	623ms	-119ms	-0.63	-19.1%
devAutodocsVisible	584ms	579ms	-5ms	-0.14	-0.9%
devMDXVisible	666ms	533ms	-133ms	-0.38	-25%
buildManagerHeaderVisible	647ms	558ms	-89ms	-0.07	-15.9%
buildManagerIndexVisible	703ms	561ms	-142ms	-0.28	-25.3%
buildStoryVisible	627ms	556ms	-71ms	-0.33	-12.8%
buildAutodocsVisible	611ms	466ms	-145ms	-0.86	-31.1%
buildMDXVisible	575ms	469ms	-106ms	-0.5	-22.6%

Greptile Summary

Based on the provided information, I'll create a concise summary of the pull request focusing on the key changes and their implications.

Simplified source panel disabling in Storybook Docs addon, focusing on using built-in parameter methods for configuration.

Added new docsSourcePanel parameter to control source panel visibility globally or per-story
Simplified manager.tsx by removing custom parameter checking logic and using built-in paramKey
Added test stories demonstrating source panel disabling functionality in sourcePanel/index.stories.tsx
Updated MIGRATION.md to document new source code panel feature in v8.5.x
Added project root handling in Vite config to support source panel functionality

This PR represents a significant improvement in how the source panel can be disabled, making it more consistent with Storybook's standard parameter handling patterns. The changes are well-documented and include demonstration stories, though additional test coverage could be beneficial.

nx-cloud · 2024-12-03T14:30:43Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 80f375d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

greptile-apps

_{14 file(s) reviewed, 12 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-12-03T14:29:49Z

MIGRATION.md

@@ -1,5 +1,7 @@
 <h1>Migration</h1>

+- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [Added source code pnael to docs](#added-source-code-pnael-to-docs)


syntax: 'pnael' is misspelled, should be 'panel'

greptile-apps · 2024-12-03T14:30:43Z

code/addons/docs/template/stories/sourcePanel/index.stories.tsx

@@ -0,0 +1,15 @@
+export default {
+  component: globalThis.Components.Button,


logic: globalThis.Components.Button may not be available in all environments - should verify this component exists or use a more reliable import

greptile-apps · 2024-12-03T14:31:11Z

code/addons/test/src/components/TestProviderRender.tsx

@@ -129,7 +129,7 @@ export const TestProviderRender: FC<
              padding="small"
              active={state.watching}
              onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)}
-              disabled={state.crashed || state.running || isEditing}
+              disabled={state.running || isEditing}


logic: removing crashed state check could allow re-running tests in an unstable state

greptile-apps · 2024-12-03T14:31:12Z

code/addons/test/src/components/TestProviderRender.tsx

@@ -152,7 +152,7 @@ export const TestProviderRender: FC<
                  variant="ghost"
                  padding="small"
                  onClick={() => api.runTestProvider(state.id, { entryId })}
-                  disabled={state.crashed || state.running || isEditing}
+                  disabled={state.running || isEditing}


logic: removing crashed state check here could lead to test runner instability if tests are re-run after a crash without cleanup

greptile-apps · 2024-12-03T14:32:15Z

code/builders/builder-vite/src/codegen-importfn-script.test.ts

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';


style: beforeEach and vi are imported but never used in the test file

greptile-apps · 2024-12-03T14:32:49Z

code/builders/builder-vite/src/codegen-importfn-script.ts

+export async function toImportFn(root: string, stories: string[]) {
  const objectEntries = stories.map((file) => {
-    const relativePath = normalizePath(relative(process.cwd(), file));
+    const relativePath = relative(root, file);

-    return `  '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
+    return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
  });


logic: normalize() should be called before relative() to ensure consistent path separators across platforms

greptile-apps · 2024-12-03T14:32:49Z

code/builders/builder-vite/src/codegen-importfn-script.ts

+  // eslint-disable-next-line @typescript-eslint/return-await
+  return await toImportFn(options.projectRoot || process.cwd(), stories);


style: unnecessary return-await since toImportFn already returns a Promise

greptile-apps · 2024-12-03T14:33:16Z

code/builders/builder-vite/src/vite-config.ts

@@ -53,18 +53,18 @@ export async function commonConfig(

  const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);

-  const projectRoot = resolve(options.configDir, '..');
+  options.projectRoot = options.projectRoot || resolve(options.configDir, '..');


logic: This mutates the options object directly, which could cause side effects. Consider creating a new object or using a local variable instead.

greptile-apps · 2024-12-03T14:33:45Z

code/core/src/core-server/utils/whats-new.ts

+        if (!main._exportsObject) {
+          // eslint-disable-next-line local-rules/no-uncategorized-errors
+          throw new Error(
+            `Unable to parse Storybook main file while trying to read 'core' property`
+          );
+        }


logic: This error check should come before using main.core on line 63-64, since the same condition could cause that to fail

greptile-apps · 2024-12-03T14:36:14Z

code/sandbox/nuxt-vite-default-ts/project.json

+  "targets": {
+    "sandbox": {},
+    "sb:dev": {},
+    "sb:build": {}
+  },


style: empty target configurations may need to be filled in with actual build/dev settings

…urce-panel-parameter

larsrickert

I like this approach! Didn't know that addon panels can be disabled like this in general :)

shilman added 2 commits December 3, 2024 21:45

Merge branch 'next' into larsrickert/1898-story-code-panel

a228b17

Addon-docs: Fix and document source panel disabling

6c95fbc

shilman added maintenance User-facing maintenance tasks addon: docs ci:normal labels Dec 3, 2024

greptile-apps bot reviewed Dec 3, 2024

View reviewed changes

Merge branch 'larsrickert/1898-story-code-panel' into shilman/dosc-so…

80f375d

…urce-panel-parameter

shilman mentioned this pull request Dec 3, 2024

Docs: Add code snippet to addons panel #29253

Merged

8 tasks

larsrickert approved these changes Dec 3, 2024

View reviewed changes

shilman merged commit 88c64d8 into larsrickert/1898-story-code-panel Dec 4, 2024
51 of 57 checks passed

shilman deleted the shilman/dosc-source-panel-parameter branch December 4, 2024 04:47

yannbf assigned shilman Dec 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon-docs: Fix source panel disabling #29791

Addon-docs: Fix source panel disabling #29791

shilman commented Dec 3, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Dec 3, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

greptile-apps bot Dec 3, 2024

larsrickert left a comment

		@@ -0,0 +1,15 @@
		export default {
		component: globalThis.Components.Button,

		@@ -0,0 +1,56 @@
		import { beforeEach, describe, expect, it, vi } from 'vitest';

		// eslint-disable-next-line @typescript-eslint/return-await
		return await toImportFn(options.projectRoot \|\| process.cwd(), stories);

Addon-docs: Fix source panel disabling #29791

Addon-docs: Fix source panel disabling #29791

Conversation

shilman commented Dec 3, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

🦋 Canary release

Greptile Summary

nx-cloud bot commented Dec 3, 2024 • edited Loading

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 3, 2024

Choose a reason for hiding this comment

larsrickert left a comment

Choose a reason for hiding this comment

shilman commented Dec 3, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Dec 3, 2024 •

edited

Loading